<template>
  <div class="operators">
    <img :alt="name" class="operator" :class="{'op-drag': name === 'drag'}" v-for="(name, index) in operators"
         :key="index" :src="getIcon(name)" @click="onClick(name)"
         @mousedown.prevent="onMouseDown(name, $event)"/>
  </div>
</template>

<script>
export default {
  name: 'ROperator',
  props: ['operators'],
  methods: {
    getIcon (name) {
      return require(`@/assets/resume/${name}.svg`)
    },
    onClick (name) {
      if (name !== 'drag') {
        this.$emit(name)
      }
    },
    onMouseDown (name, event) {
      if (name === 'drag') {
        this.$emit(name, event)
      }
    }
  }
}
</script>

<style scoped lang="less">
  .operators {
    position: absolute;
    right: 1px;
    top: 0;
    display: none;

    .operator {
      margin-left: 5px;
      width: 18px;
      height: 18px;
      cursor: pointer;

      &:hover{
        filter: brightness(105%);
      }
    }

    .op-drag {
      cursor: grab;
    }
  }

  .mod > *:hover .operators{
    display: block;
  }
</style>
